<template>
  <div class="stackBox" ref="stack" id="main"></div>
</template>
<script setup>
// 堆积柱状图
import * as echarts from 'echarts/core';
import {
  TooltipComponent,
  GridComponent,
  LegendComponent
} from 'echarts/components';
import { BarChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
import { ref,  onMounted, reactive, watch, } from "vue";
echarts.use([
  TooltipComponent,
  GridComponent,
  LegendComponent,
  BarChart,
  CanvasRenderer
]);

// 航道对应的tab
const props = defineProps({ waterwayId: String });
const waterwayId = props.waterwayId || "";
console.log(26,waterwayId);
const initChart=()=>{
  var myChart = echarts.init(document.getElementById('main'));
  console.log(myChart);
var option;
option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    },
    textStyle: {
      color: '#fff',
      align: 'left',
      fontSize: 14
    },
    axisLine: {
      //x坐标轴轴线
      show: true,
      lineStyle: {
        //x坐标轴轴线样式
        color: '#000' //'#ccc' | 'rgb(128, 128, 128)' | 'rgba(128, 128, 128, 0.5)'，设置标签颜色
      }
    },

    backgroundColor: '#000',
    formatter: function (params) {
      console.log(params);
      let str = params[0].name + '<br />';
      console.log(str);
      params.forEach((item) => {
        console.log(item.seriesName);
        if (item.value) {
          str += `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color: ${item.color}
                                    "></span>
                                         ${item.seriesName}
                                         :
                                       ${item.value}艘  <br/>
                                         `;
        }
      });
      return str;
    }
  },
  // grid: {
  //   left: '3%',
  //   right: '4%',
  //   bottom: '3%',
  //   containLabel: true
  // },
    grid: {
        top: "80px",
        left: "50px",
        right: "30px",
        bottom: "30px",
        backgroundColor: "#fff",
        width: "auto", //图例宽度
        height: "auto", //图例高度
      },
  legend: {
    // 上面显示的类名
    data: ['货船', '客船', '渔船', '危险品船', '其他船']
  },
  xAxis: {
    type: 'category',
    data: [
      '1月',
      '2月',
      '3月',
      '4月',
      '5月',
      '6月',
      '7月',
      '8月',
      '9月',
      '10月',
      '11月',
      '12月'
    ],
     axisTick: {
          interval: 1,
          show: false, //是否显示坐标轴刻度。
        },
  },
  yAxis: [
    {
            type: "value",
            name: "(万艘)",
            nameTextStyle: {
              color: "#000", //坐标轴名称的颜色
              fontWeight: "400", //字体粗细
            },
          },
    {
      type: 'value',

      // min: 0,
      // max: 100,
      nameTextStyle: {
        color: '#ccc',
        padding: [0, 0, 30, -30]
      },
      splitNumber: 5,
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
          width: 1,
          // 使用深浅的间隔色
          color: ['#566471', '#566471']
        }
      },
      axisLabel: {
        show: true,
        textStyle: {
          fontSize: 8
        }
      }
    }
  ],
  series: [
    {
      name: '货船',
      data: [150, 230, 224, 218, 135, 147, 260],
      stack: 'AA',
      type: 'bar'
    },
    {
      name: '客船',
      data: [150, 230, 224, 218, 135, 147, 260],
      stack: 'AA',
      type: 'bar'
    },
    {
      name: '渔船',
      data: [150, 230, 224, 218, 135, 147, 260],
      stack: 'AA',
      type: 'bar'
    },
    {
      name: '危险品船',
      data: [880, 30, 124, 118, 35, 47, 160],
      stack: 'AA',
      type: 'bar'
    },
    {
      name: '其他船',
      data: [660, 30, 124, 118, 35, 47, 160],
      stack: 'AA',
      type: 'bar'
    }
  ]
};

option && myChart.setOption(option);
}
watch(()=>{props.waterwayId}, (newVal) => {
  console.log('子组件',newVal);
}, {
  deep: true,
  immediate: true,
});
 onMounted (()=> {
initChart()
}
  )
</script>


<style scoped>
.stackBox {
  height: 338px;
  width: 343px;
  margin: 0 auto;
  border-radius: 8px 8px 0 0;
  /* padding: 10px; */
  background: #FFFFFF;
box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.12);
border-radius: 6px 6px 6px 6px;
 margin-top: 16px;
}
</style>